<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--使用v-show做条件渲染：
            用"style='display:none;'"
    -->
    <!--        <h2 v-show="true">欢迎来到{{name}}</h2>-->
    <!--使用v-if做条件渲染：
            直接删除元素
    -->
    <!--        <h2 v-if="true">欢迎来到{{name}}</h2>-->
    <h2>当前的n值为：{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!--如果变换频率高，建议用v-show-->
    <!--<div v-show="n === 1">Angular</div>
    <div v-show="n === 2">React</div>
    <div v-show="n === 3">Vue</div>-->
    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>Other</div>
    <hr>
    <!--v-if和template的配合使用-->
    <template v-if="n === 1">
        <!--注意template只能用v-if，不能用v-show-->
        <h2>你好</h2>
        <h2>abc</h2>
        <h2>北京</h2>
    </template>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data() {

            return {
                name: "abc",
                n: 1
            }
        },
        computed: {},
        methods: {},
        watch: {}
    });
</script>
</html>